@import "@/styles/__index.less";

.warn-group{
  gap: 12px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.warn-line{
  display: flex;
  align-items: center;
  //margin-top: 8px;
  .index{
    color: #B7FFFF;
    width: 20px;
    height: 20px;
    border: #B7FFFF 1px solid;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
  }
  .gapLine{
    width: 100%;
    border-top: #B7FFFF dashed 2px;
  }
  .title{
    color: #B7FFFF;
    flex: 1;
    //line-height: 30px;
    //align-self: center;
    //&.TimePick{
    //  color: rgba(80,255,240,0.5);
    //}
  }
  .content{
    flex:3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    .items{
      display: flex;
      //gap: 8px;
      //justify-content: center;
      align-items: center;
      .name{
        width: 160px;
        //flex: 1;
      }
      .itemType{
        flex: 1;
      }
    }
    .number{
      display: flex;
      width: 100%;
      flex-direction: column;
      gap: 8px;
    }
    .numberInput{
      //width: 100%;
      &.ant-input-number{
        //width: 100%;
        background-color: transparent;
        color: white;
        border-color: #B7FFFF;
        border-radius: 8px;
      }
    }
  }
  .TimePick{
    //width: 100%;
      .ant-picker-range{
        //width: 100%;
        background-color: transparent;
        color: white;
        border-color: #B7FFFF;
        border-radius: 8px;
      }
    :deep(.ant-picker-input) > input{
      color: white !important;
    }

    :deep(.ant-picker-range-separator),:deep(.ant-picker-suffix){
      svg{
        color: white !important;
      }
    }
  }
  .switch{
    width: 100px;
    //align-items: flex-end;
    div{
      height: 30px;
    }
  }
}
